import { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

import { BankcardOutline } from 'antd-mobile-icons'
import {
  List,
  Checkbox,
  Stepper,
  SwipeAction,
  Button,
  ErrorBlock,
  createErrorBlock
} from 'antd-mobile'
import { Action } from 'antd-mobile/es/components/swipe-action'

import { RootState } from '@/store'
import { setChecked, setNum, del, setAllChecked } from '@/store/modules/cart'
import { useFormatPrice } from '@/hooks/formatPrice'

import styles from './index.module.scss'

export default function MyCart () {
  const formatPrice = useFormatPrice()
  const dispatch = useDispatch()

  const rightActions: Action[] = [
    {
      key: 'delete',
      text: '删除',
      color: 'danger'
    }
  ]

  const cartList = useSelector((state: RootState) => state.cart.cartList)

  // 单选
  const changeState = (val: boolean, id: string) => {
    console.log(val, id)
    dispatch(setChecked({ checked: val, id }))
  }

  // 修改数量
  const changeNum = (num: number, id: string) => {
    console.log(num, id)
    dispatch(setNum({ num, id }))
  }

  // 删除
  const delGoods = (action: any, id: string) => {
    if (action.key === 'delete') {
      dispatch(del({ id }))
    }
  }

  // 全选反选
  const changeAllChecked = (checked: boolean) => {
    dispatch(setAllChecked({ checked }))
  }

  // 计算勾选商品价格
  // let price = 0
  // const selectPrice = () => {
  //   cartList.reduce((prev, item) => {
  //     return (price = prev + item.number * item.price)
  //   }, 0)
  // }
  // selectPrice()

  // 计算勾选商品价格 优化
  const price = cartList
    .filter(item => item.isChecked)
    .reduce((prev, item) => {
      return (prev += prev + item.number * item.price)
    }, 0)

  // const ErrorBlock = createErrorBlock({
  //   empty:
  //     'https://ts1.cn.mm.bing.net/th/id/R-C.751bed26ba007e39dd26ad9a008c6565?rik=3%2fS6ukBf9aeSww&riu=http%3a%2f%2fb2b.zjxbyy.cn%2fimages%2fempty.gif&ehk=c5NhAx0A5RGg1sWoqiK9AyUPM7M57WS2SeA%2f7MSrI0I%3d&risl=&pid=ImgRaw&r=0'
  // })

  return (
    <div className={styles.cartContainer}>
      {cartList.length ? (
        <div>
          <div className={styles.header}>
            <BankcardOutline fontSize={20} />
            <span style={{ marginLeft: 5 }}>嗨购商城</span>
          </div>
          <div className={styles.middle}>
            <List>
              {cartList.map(item => {
                return (
                  <SwipeAction
                    rightActions={rightActions}
                    onAction={action => {
                      delGoods(action, item.id)
                    }}
                    key={item.id}
                  >
                    <List.Item>
                      <div className={styles.listItem}>
                        <Checkbox
                          checked={item.isChecked}
                          onChange={val => {
                            changeState(val, item.id)
                          }}
                        ></Checkbox>
                        <div className={styles.img}>
                          <img src={item.img} alt='' />
                        </div>
                        <div className={styles.right}>
                          <div className={styles.top}>{item.name}</div>
                          <div className={styles.bottom}>
                            <div className={styles.bottomLeft}>
                              ￥{formatPrice(item.price)}
                            </div>
                            <div className={styles.bottomRight}>
                              <Stepper
                                min={1}
                                defaultValue={item.number}
                                onChange={num => {
                                  changeNum(num, item.id)
                                }}
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </List.Item>
                  </SwipeAction>
                )
              })}
            </List>
          </div>
          <div className={styles.footer}>
            <div className={styles.left}>
              <Checkbox
                checked={cartList.every(item => item.isChecked)}
                onChange={val => {
                  changeAllChecked(val)
                }}
              >
                全选
              </Checkbox>
            </div>
            <div className={styles.middle}>
              合计:<span>￥{formatPrice(price)}</span>
            </div>
            <div className={styles.right}>
              <Button
                disabled={!price}
                color='primary'
                shape='rounded'
                style={{ margin: '10px 0', padding: '8px 25px' }}
              >
                提交订单
              </Button>
            </div>
          </div>
        </div>
      ) : (
        // <ErrorBlock status='empty' />
        <ErrorBlock
          style={{
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center'
          }}
          title='购物车暂无商品，快去挑选吧~'
          description=''
          image='https://ts1.cn.mm.bing.net/th/id/R-C.751bed26ba007e39dd26ad9a008c6565?rik=3%2fS6ukBf9aeSww&riu=http%3a%2f%2fb2b.zjxbyy.cn%2fimages%2fempty.gif&ehk=c5NhAx0A5RGg1sWoqiK9AyUPM7M57WS2SeA%2f7MSrI0I%3d&risl=&pid=ImgRaw&r=0'
        />
      )}
    </div>
  )
}
